<template>
  <div class="msgContainer">
    <div class="store-header">
      <el-upload
        class="avatar-uploader"
        :action="this.$common.getApiUrl(this.$common.ELE_MONKEY_SERVER_URL.BASE, this.$common.ELE_MONKEY_API.UPLOAD_FILE)"
        :show-file-list="false"
        :on-success="handleAvatarSuccess1"
        :before-upload="beforeAvatarUpload1">
        <span style="float: left;" v-if="!(formLabelAlign.storeInformation.logoImage)"><img src="../../../assets/images/customer/default_user_icon.png" class="avatar"></span>
        <span style="float: left;" v-else><img :src="this.$common.getResourceUrl(formLabelAlign.storeInformation.logoImage)" class="avatar"></span>
      </el-upload>
    </div>
    <div class="store-content">
      <div class="sign" :class="{ 'sign-in': signIn }"></div>
      <div class="sign-left"></div>
      <div class="sign-right"></div>
      <div class="store-product-container">
        <el-card style="border-radius: 60px">
          <el-form label-position="left" label-width="400px" :model="formLabelAlign">
            <el-form-item label="店铺名">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="店铺地址">
              <el-input v-model="formLabelAlign.address"></el-input>
            </el-form-item>
            <el-form-item label="店铺执照号">
              <el-input v-model="formLabelAlign.license" disabled></el-input>
            </el-form-item>
            <el-form-item label="开店时间">
              <el-time-select
                v-model="formLabelAlign.storeInformation.open"
                :picker-options="{
    start: '00:00',
    step: '00:10',
    end: '24:00'
  }"
                placeholder="选择时间">
              </el-time-select>
            </el-form-item>
            <el-form-item label="关店时间">
              <el-time-select
                v-model="formLabelAlign.storeInformation.close"
                :picker-options="{
    start: '00:00',
    step: '00:10',
    end: '24:00'
  }"
                placeholder="选择时间">
              </el-time-select>
            </el-form-item>
            <el-form-item label="配送范围">
              <el-input v-model="formLabelAlign.storeInformation.deliveryArea"></el-input>
            </el-form-item>
            <el-form-item label="配送费">
              <el-input v-model="formLabelAlign.storeInformation.deliveryCost"></el-input>
            </el-form-item>
            <el-form-item label="商铺简介">
              <el-input type="textarea" v-model="formLabelAlign.storeInformation.description"></el-input>
            </el-form-item>
            <el-form-item label="活动性质">
              <el-checkbox-group v-model="formLabelAlign.type1">
                <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
                <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
                <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="评分">
              <el-rate :value="4" disabled show-score text-color="#ff9900" score-template="{value}" style="padding: 10px 0" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
            </el-form-item>
            <el-form-item label="状态">
              <el-tag type="primary" v-if="formLabelAlign.currentAuditStatus === 0">审核中</el-tag>
              <div v-if="formLabelAlign.currentAuditStatus === 1">
              <el-tag type="primary" >
                通过
              </el-tag>
              <el-button type="success" size="small"  @click="updateMsg" plain>更新</el-button>
              </div>
              <el-tag type="primary" v-if="formLabelAlign.currentAuditStatus === 2">拒绝</el-tag>
              <el-tag type="primary" v-if="formLabelAlign.currentAuditStatus === 3">驳回</el-tag>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StoreMsg',
  data () {
    return {
      labelPosition: 'right',
      formLabelAlign: {},
      signIn: false
    }
  },
  created () {
    this.getStoreMsg(this.$store.state.store.id)
  },
  methods: {
    updateMsg () {
      this.$merchantAPI.store_update(this.formLabelAlign).then((params) => {
        this.formLabelAlign = params.data
        this.$alert(params.message)
      }).catch((params) => {
      })
    },
    getStoreMsg (storeId) {
      this.$merchantAPI.store_msg(storeId).then((params) => {
        this.formLabelAlign = params.data
        this.$store.state.store = {
          id: params.data['id'],
          currentAuditStatus: params.data['currentAuditStatus']
        }
        if (this.formLabelAlign.currentAuditStatus === 1) {
          setTimeout(() => {
            this.signIn = true
          }, 1000)
        }
      }).catch((params) => {
      })
    },
    handleAvatarSuccess1 (res, file) {
      this.formLabelAlign.storeInformation.logoImage = res
      this.updateMsg()
      this.$alert('上传成功')
    },
    beforeAvatarUpload1 (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG / PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
  body, html, #allmap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
  }
  * {
    transition: all .15s ease-in-out;
  }
  .sign{
    position: absolute;
    bottom: 180px;
    right: 450px;
    width: 0;
    height: 0;
    z-index: 9999;
    opacity: 0.4;
    background-image: url("../../../assets/images/merchant/sign.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .sign-left{
    position: absolute;
    bottom: 45%;
    left: 6%;
    width: 200px !important;
    height: 200px !important;
    z-index: 9999;
    opacity: 0.4;
    background-image: url("../../../assets/images/merchant/monkey.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .sign-right{
    position: absolute;
    bottom: 45%;
    right: 6%;
    width: 200px !important;
    height: 200px !important;
    z-index: 9999;
    opacity: 0.4;
    background-image: url("../../../assets/images/merchant/monkey.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .sign-in {
    width: 200px !important;
    height: 200px !important;
    bottom: 50px !important;
    right: 300px !important;
  }
  .avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid white;
    box-sizing: border-box;
    display: block;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .4);
  }

  .msgContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .store-content {
    width: 100%;
    padding: 100px 0;
    margin-top: -50px;
    background-color: transparent;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    display: flex;
    position: relative;
    flex-direction: column;
  }

  .store-product-container {
    display: flex;
    padding: 0 30px;
    align-items: center;
    justify-content: center;
  }

  .store-header {
    padding: 10px 0;
    display: flex;
    z-index: 2018;
    align-items: center;
    justify-content: space-between;
  }
</style>
